import React from "react";
import PropTypes from "prop-types";
import { connect } from "dva";
import { Button, Row, Col, Form, Input, Icon } from "antd";
import { config, uuid } from "utils";
import styles from "./index.less";

const FormItem = Form.Item;

const Login = ({
  login,
  dispatch,
  form: { getFieldDecorator, validateFieldsAndScroll }
}) => {
  const { loginLoading, timestamp } = login;
  const uuid = sessionStorage.getItem("uuid");
  const captchaUrl = `${config.host}/captcha.jpg?key=${uuid}&v=${timestamp}`;

  function refreshCaptcha() {
    dispatch({ type: "login/reload" });
  }
  function handleOk() {
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return;
      }
      dispatch({ type: "login/login", payload: values });
    });
  }

  return (
    <div
      className={styles.form}
      style={{
        boxShadow: " 0 -2px 0 #efefef,0 2px 0 #efefef",
        borderRadius: 5
      }}
    >
      <div>
        <img
          style={{ width: 320 }}
          src={require("../../../assets/start.png")}
        />
      </div>

      <div style={{ width: "50%" }}>
        <div className={styles.logo}>
          <img alt={"logo"} src={config.logo1} />
          <br />
          <span>Hello!</span>
          <br />
          <span>欢迎登陆</span>
          <span style={{ color: "#108ee9" }}>{config.name}</span>
        </div>
        <form>
          <FormItem hasFeedback>
            {getFieldDecorator("mobile", {
              rules: [
                {
                  required: true,
                  message: "请输入账号"
                }
              ]
            })(
              <Input
                size="large"
                prefix={<Icon type="user" />}
                onPressEnter={handleOk}
                placeholder="用户名"
              />
            )}
          </FormItem>
          <FormItem hasFeedback>
            {getFieldDecorator("password", {
              rules: [
                {
                  required: true,
                  message: "请输入密码"
                }
              ]
            })(
              <Input
                size="large"
                prefix={<Icon type="lock" />}
                type="password"
                onPressEnter={handleOk}
                placeholder="登录密码"
              />
            )}
          </FormItem>

          <Row>
            <Button
              type="primary"
              size="large"
              onClick={handleOk}
            >
              登录
            </Button>
          </Row>
        </form>
      </div>
    </div>
  );
};

Login.propTypes = {
  form: PropTypes.object,
  login: PropTypes.object,
  dispatch: PropTypes.func
};

export default connect(({ login }) => ({ login }))(Form.create()(Login));
